فارسی

راهنمای جامع مسیرهای موازی Next.js برای ساخت طرح‌بندی‌های داینامیک و انعطاف‌پذیر با بخش‌های مستقل. پیاده‌سازی، مزایا و بهترین شیوه‌ها را بیاموزید.

مسیرهای موازی در Next.js: ساخت طرح‌بندی‌های داینامیک صفحه

Next.js، یکی از فریمورک‌های پیشرو React، دائماً در حال تکامل است تا ابزارهای قدرتمندی برای ساخت اپلیکیشن‌های وب مدرن در اختیار توسعه‌دهندگان قرار دهد. یکی از هیجان‌انگیزترین ویژگی‌های معرفی شده در نسخه‌های اخیر، مسیرهای موازی (Parallel Routes) است. این ویژگی به شما امکان می‌دهد چندین بخش مستقل را در یک طرح‌بندی صفحه رندر کنید و انعطاف‌پذیری و کنترل بی‌نظیری بر ساختار و تجربه کاربری اپلیکیشن خود داشته باشید.

مسیرهای موازی چه هستند؟

به طور سنتی، یک مسیر در Next.js با یک کامپوننت صفحه مطابقت دارد. وقتی به مسیر دیگری می‌روید، کل صفحه دوباره رندر می‌شود. مسیرهای موازی این پارادایم را با امکان رندر کردن چندین کامپوننت همزمان در یک طرح‌بندی، که هر کدام توسط بخش مسیر مستقل خود مدیریت می‌شوند، می‌شکنند. این را مانند تقسیم صفحه خود به بخش‌های مجزا در نظر بگیرید که هر کدام URL و چرخه حیات خود را دارند و همه در یک صفحه نمایش همزیستی می‌کنند.

این ویژگی امکانات زیادی برای ایجاد رابط‌های کاربری پیچیده‌تر و داینامیک‌تر باز می‌کند. به عنوان مثال، می‌توانید از مسیرهای موازی برای موارد زیر استفاده کنید:

درک مفهوم: اسلات‌ها (Slots)

مفهوم اصلی پشت مسیرهای موازی، «اسلات» است. اسلات یک ناحیه نام‌گذاری شده در طرح‌بندی شماست که یک بخش مسیر خاص در آن رندر می‌شود. شما این اسلات‌ها را در دایرکتوری app خود با استفاده از نماد @ و به دنبال آن نام اسلات تعریف می‌کنید. به عنوان مثال، @sidebar یک اسلات به نام "sidebar" را نشان می‌دهد.

هر اسلات سپس می‌تواند با یک بخش مسیر مرتبط شود. وقتی کاربر به یک مسیر خاص می‌رود، Next.js کامپوننت مرتبط با آن بخش مسیر را در اسلات مربوطه در طرح‌بندی رندر می‌کند.

پیاده‌سازی: یک مثال عملی

بیایید با یک مثال عملی نحوه کار مسیرهای موازی را نشان دهیم. تصور کنید در حال ساخت یک اپلیکیشن تجارت الکترونیک هستید و می‌خواهید یک صفحه جزئیات محصول را با یک نوار کناری سبد خرید پایدار نمایش دهید.

۱. ساختار دایرکتوری

ابتدا، بیایید ساختار دایرکتوری اپلیکیشن خود را تعریف کنیم:

app/
  product/
    [id]/
      @cart/
        page.js  // کامپوننت سبد خرید
      page.js      // کامپوننت جزئیات محصول
    layout.js   // طرح‌بندی محصول
  layout.js     // طرح‌بندی ریشه

در اینجا نقش هر فایل توضیح داده شده است:

۲. طرح‌بندی ریشه (app/layout.js)

طرح‌بندی ریشه معمولاً شامل عناصری است که در سراسر اپلیکیشن به اشتراک گذاشته می‌شوند، مانند هدرها و فوترها.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
برنامه تجارت الکترونیک من
{children}
© 2024
); }

۳. طرح‌بندی محصول (app/product/[id]/layout.js)

این بخش حیاتی است که در آن اسلات‌های خود را تعریف می‌کنیم. ما کامپوننت‌های صفحه اصلی محصول و سبد خرید را به عنوان پراپ دریافت می‌کنیم که به ترتیب با page.js و @cart/page.js مطابقت دارند.

// app/product/[id]/layout.js
export default function ProductLayout({ children, cart }) {
  return (
    
{children}
); }

در این مثال، از یک طرح‌بندی flexbox ساده برای قرار دادن محتوای اصلی محصول و نوار کناری سبد خرید در کنار هم استفاده می‌کنیم. پراپ children شامل خروجی رندر شده app/product/[id]/page.js خواهد بود و پراپ cart شامل خروجی رندر شده app/product/[id]/@cart/page.js خواهد بود.

۴. صفحه جزئیات محصول (app/product/[id]/page.js)

این یک صفحه مسیر داینامیک استاندارد است که جزئیات محصول را بر اساس پارامتر id نمایش می‌دهد.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // دریافت داده‌های محصول بر اساس ID
  const product = await fetchProduct(id);

  return (
    

جزئیات محصول

{product.name}

{product.description}

قیمت: ${product.price}

); } async function fetchProduct(id) { // با منطق واقعی دریافت داده خود جایگزین کنید return new Promise(resolve => setTimeout(() => { resolve({ id, name: `محصول ${id}`, description: `توضیحات محصول ${id}`, price: 99.99 }); }, 500)); }

۵. کامپوننت سبد خرید (app/product/[id]/@cart/page.js)

این کامپوننت سبد خرید را نشان می‌دهد که در اسلات @cart رندر خواهد شد.

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    

سبد خرید

تعداد اقلام در سبد: ۳

); }

توضیح

وقتی کاربر به مسیر /product/123 می‌رود، Next.js:

  1. طرح‌بندی ریشه (app/layout.js) را رندر می‌کند.
  2. طرح‌بندی محصول (app/product/[id]/layout.js) را رندر می‌کند.
  3. درون طرح‌بندی محصول، کامپوننت جزئیات محصول (app/product/[id]/page.js) را در پراپ children رندر می‌کند.
  4. همزمان، کامپوننت سبد خرید (app/product/[id]/@cart/page.js) را در پراپ cart رندر می‌کند.

نتیجه یک صفحه جزئیات محصول با یک نوار کناری سبد خرید پایدار است که همگی در یک طرح‌بندی واحد رندر شده‌اند.

مزایای استفاده از مسیرهای موازی

ملاحظات و بهترین شیوه‌ها

کاربرد پیشرفته: رندر شرطی و اسلات‌های داینامیک

مسیرهای موازی به تعریف اسلات‌های استاتیک محدود نمی‌شوند. شما همچنین می‌توانید از رندر شرطی و اسلات‌های داینامیک برای ایجاد طرح‌بندی‌های انعطاف‌پذیرتر استفاده کنید.

رندر شرطی

شما می‌توانید کامپوننت‌های مختلف را به صورت شرطی در یک اسلات بر اساس نقش‌های کاربر، وضعیت احراز هویت یا عوامل دیگر رندر کنید.

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    
{children}
); } function AdminPanel() { return (

پنل ادمین

جزئیات محصول را اینجا مدیریت کنید.

); }

در این مثال، اگر کاربر نقش 'admin' داشته باشد، به جای سبد خرید، یک کامپوننت AdminPanel در اسلات @cart رندر خواهد شد.

اسلات‌های داینامیک

در حالی که کمتر رایج است، شما *می‌توانید* به صورت تئوری نام‌های اسلات را به صورت داینامیک بسازید، اما این کار به دلیل پیچیدگی و پیامدهای عملکردی بالقوه معمولاً توصیه نمی‌شود. بهتر است به اسلات‌های از پیش تعریف شده و قابل درک پایبند باشید. اگر نیاز به «اسلات‌های» داینامیک به وجود آمد، راه حل‌های جایگزین مانند استفاده از کامپوننت‌های استاندارد React با پراپ‌ها و رندر شرطی را در نظر بگیرید.

مثال‌های دنیای واقعی و موارد استفاده

بیایید برخی از مثال‌های دنیای واقعی از نحوه استفاده از مسیرهای موازی در انواع مختلف اپلیکیشن‌ها را بررسی کنیم:

نتیجه‌گیری

مسیرهای موازی در Next.js یک ویژگی قدرتمند است که دنیای جدیدی از امکانات را برای ساخت اپلیکیشن‌های وب داینامیک و انعطاف‌پذیر باز می‌کند. با اجازه دادن به شما برای رندر کردن چندین بخش مستقل در یک طرح‌بندی صفحه، مسیرهای موازی شما را قادر می‌سازند تا تجربیات کاربری جذاب‌تری ایجاد کنید، قابلیت استفاده مجدد از کد را افزایش دهید و فرآیند توسعه را ساده‌تر کنید. در حالی که در نظر گرفتن پیچیدگی‌های بالقوه و پیروی از بهترین شیوه‌ها مهم است، تسلط بر مسیرهای موازی می‌تواند به طور قابل توجهی مهارت‌های توسعه Next.js شما را افزایش دهد و به شما امکان ساخت اپلیکیشن‌های وب واقعاً نوآورانه را بدهد.

همانطور که Next.js به تکامل خود ادامه می‌دهد، مسیرهای موازی بدون شک به ابزاری مهم برای توسعه‌دهندگانی تبدیل خواهند شد که به دنبال شکستن مرزهای ممکن در وب هستند. با مفاهیم ذکر شده در این راهنما آزمایش کنید و کشف کنید که چگونه مسیرهای موازی می‌توانند رویکرد شما را برای ساخت اپلیکیشن‌های وب مدرن متحول کنند.

مسیرهای موازی در Next.js: ساخت طرح‌بندی‌های داینامیک صفحه | MLOG